<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/common::header">
    <title>Title</title>
    <style type="text/css">
        .layui-input-block {
            margin-left: 26px;
            min-height: 36px;
        }
    </style>
</head>
<body>
<!--导航栏-->
<div class="x-nav">
              <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">系统管理</a>
                <a><cite>操作日志</cite></a>
              </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>

<!--详情DOM-->
<div id="operateDetails" style="display: none;">
    <div class="layui-form-item">
        <div class="layui-input-inline" >
        </div>
    </div>
    <div class="layui-input-block" style=" margin-left: 26px;">
        <label class="layui-form-label">操作类型：</label>
        <div class="layui-input-inline">
            <input type="text" style="width:250px;" value=""  id="operType"
                disabled   class="layui-input search_input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline" >
        </div>
    </div>
    <div class="layui-input-block" style=" margin-left: 26px;">
        <label class="layui-form-label">描述：</label>
        <div class="layui-input-inline">
            <input type="text" value="" id="desc"
                   disabled  style="width:250px;"   class="layui-input search_input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline" >
        </div>
    </div>
    <div class="layui-input-block" style=" margin-left: 26px;">
        <label class="layui-form-label">方法名：</label>
        <div class="layui-input-block">
            <textarea name="methodName" id="methodName" disabled  class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline" >
        </div>
    </div>
    <div class="layui-input-block" style=" margin-left: 26px;">
        <label class="layui-form-label">参数：</label>
        <div class="layui-input-block">
            <textarea name="params" id="params" disabled  class="layui-textarea"></textarea>
        </div>
    </div>
</div>

    <!-----查询条件---->
    <blockquote class="layui-elem-quote news_search">
        <form class="layui-form" method="post" action="">
            <div class="layui-inline">
                <label class="layui-form-label">操作人：</label>
                <div class="layui-input-inline">
                    <input type="text" value="" placeholder="名称" id="username"
                           class="layui-input search_input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">IP：</label>
                <div class="layui-input-inline">
                    <input type="text" value="" placeholder="ip地址" id="ip"
                           class="layui-input search_input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">操作日期：</label>
                <div class="layui-input-inline">
                    <input type="text" placeholder="开始时间" class="layui-input" id="startDate">
                </div>--
                <div class="layui-input-inline">
                    <input type="text" placeholder="结束时间" class="layui-input" id="startEnd">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">操作类型：</label>
                <div class="layui-input-inline">
                    <select id="operateType">
                        <option value="">请选择</option>
                        <option value="ADD">ADD</option>
                        <option value="DELETE">DELETE</option>
                        <option value="UPDATE">UPDATE</option>
                        <option value="SELECT">SELECT</option>
                        <option value="LOGIN">LOGIN</option>
                        <option value="LOGOUT">LOGOUT</option>
                    </select>
                </div>
            </div>
            <div class="layui-input-inline">
                <a class="layui-btn search_btn" onclick="reloding()">查询</a>
            </div>
        </form>
    </blockquote>
    <!-- 数据表格 -->
    <table id="operationLog" lay-filter="operationLogFilter"></table>

<script type="text/html" id="operationLogBar">
    <a  class="layui-btn layui-bg-blue layui-btn-xs" lay-event="details">详情</a>
</script>
<script type="text/javascript" th:inline="none">

    /*----------------------------------刷新主表格------------------------------*/
    function reloding() {
        layui.use('table', function () {
            var table = layui.table;
            table.reload('operationLog', {
                height: 'full-150',
                url: '/dangxia/operationlog/getOperationLogAll',
                method: 'post',
                where: {
                    username: $("#username").val(),
                    ip: $("#ip").val(),
                    startDate: $("#startDate").val(),
                    endDate: $("#endDate").val(),
                    operateType:$("#operateType").val()
                }
            });
        });
    }

    /*--------------------------------------------数据表格----------------------------------*/
    layui.use(['table'], function () {
        var table = layui.table;
        var form = layui.form;

        //第一个实例
        table.render({
            elem: '#operationLog'
            , height: 'full-150'
            , defaultToolbar: []  //默认工具
            //,initSort: {field:'createDate',type:'desc'}
            ,skin: 'row' //设置皮肤
            , even: true    //偶数行
            ,autoSort: false //禁用前端自动排序。
            , url: '/dangxia/operationlog/getOperationLogAll' //数据接口
            , page: true //开启分页
            , limits: [10, 15 , 20]
            , limit: 10
            , cols: [[ //表头
                {field: 'id', title: 'ID',sort: true}
                , {field: 'username', title: '操作人'}
                , {field: 'operateType', title: '操作类型'}
                , {field: 'description', title: '描述'}
                , {field: 'ip', title: '访问IP'}
                , {field: 'createDate', title: '操作日期',sort: true}
                , {field: 'right', title: '操作', toolbar: '#operationLogBar'}
            ]]
        });

        /*监听行工具事件*/
        table.on('tool(operationLogFilter)', function (obj) {
            /*行工具条分流*/
            switch (obj.event) {
                /*监听详情按钮*/
                case "details":
                    var edit = layer.open({
                        type: 1,
                        title: "操作详情",
                        area: ['600px', '500px'],
                        content: $('#operateDetails')
                    });
                    //清空
                    $("#operType").val();
                    $("#desc").val();
                    $("#methodName").val();
                    $("#params").val();

                    $("#operType").val(obj.data.operateType);
                    $("#desc").val(obj.data.description);
                    $("#methodName").val(obj.data.method);
                    $("#params").val(obj.data.params);
                    break;
            }
        });
        //监听排序事件
        table.on('sort(operationLogFilter)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('operationLog', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , height: 'full-150'
                ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    ,order: obj.type //排序方式
                }
            });
        });
    });

    /*---------------------------日历框----------------------------*/
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#startDate' //指定元素
            ,type: 'datetime'
        });
        //执行二个laydate实例
        laydate.render({
            elem: '#startEnd' //指定元素
            ,type: 'datetime'
        });
    });
</script>

</body>
</html>